<template>
  <div class='detailManage-table'>
    <el-table
      :data='tableDatas'
    > 

      <el-table-column type='index' label='序号' width='90'  />
      <el-table-column
       :key='i'
        v-for='(k,i) in tableCol' 
       :label='k.label'
       :prop="k.value"
       :formatter='formatter'
       />

      <el-table-column label='操作' width='170'>
        <template scope='scope'>
          <span class="opt-btn-sp"> 
            <a @click.stop='handleEdit(scope.$index)'><i class="fa fa-edit"></i>修改</a>
            <a @click.stop='handleDel(scope.$index)'><i class="fa fa-remove"></i>删除</a>
          </span>   
        </template>
      </el-table-column>

    </el-table>



    <div class="fenye">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="page.pageNo"
        :page-size="page.pageSize"
        :page-sizes="[10, 40, 100, 200,400]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
       />
     </div>


     <edit-dialog :dialogVisible.sync='dialogVisible' :editProp ='editProp'/>


  </div>
</template>

<script>
import EditDialog from './editDialog'
import Bus from './bus'
import Vue from 'vue'
import { MessageBox, Message, Pagination } from 'element-ui'
Vue.use(Pagination)
export default {
  components: {
    EditDialog
  },
  data () {
    return {
      page: {
        pageNo: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      leaveName: '',
      year: '',
      tableCol: [
        {
          label: '假期名称',
          value: 'leaveName'
        }, {
          label: '是否启用余额',
          value: 'isEnable'
        }, {
          label: '创建日期',
          value: 'createDate'
        }, {
          label: '休假日期',
          value: 'vacationDate'
        }
      ],
      tableDatas: [],
      editProp: {},
      refresh: 0
    }
  },

  computed: {
    id () {
      return this.$route.query.id || ''
    }
  },

  watch: {
    refresh (newValue, oldValue) {
      newValue && (this.getTableData())
    }
  },

  methods: {

    handleEdit (i) {
      this.editProp = this.tableDatas[i]
      this.dialogVisible = true
    },
    handleDel (i) {
      MessageBox.confirm('是否确认删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {

        const params = {
          id: this.tableDatas[i].id
        }

        this.Axios
          .Post('/wfConfVacationRoutine/deleteRecord', params)
          .then((res) => {

            const type = res.data.status == 1 ? 'success' : 'error'

            Message({
              type,
              message: res.data.message
            })

            if (res.data.status == 1) {
              this.tableDatas.splice(i, 1)
            }

          })

      }).catch(() => {

      });

    },

    formatter (row, column, cellValue) {

      if (column.property == 'isEnable') {
        if (cellValue == 1) {
          return '是'
        } else if (cellValue == 0) {
          return '否'
        }
      }

      if (column.property == "createDate" || column.property == 'vacationDate') {

        if (cellValue) {
          // const result = new Date(cellValue).toLocaleString().split(' ')
          // return result.length && result[0]

          var date = new Date(cellValue);//时间戳为10位需*1000，时间戳为13位的话不需乘1000

          return cellValue.toString().split(' ').length && cellValue.toString().split(' ')[0]
        }
      }
      return cellValue
    },

    handleSizeChange (val) {
      this.page.pageSize = val
      this.getTableData()
    },
    handleCurrentChange (val) {
      this.page.pageNo = val
      this.getTableData()
    },
    getTableData () {
      const params = {
        id: this.id,
        leaveName: this.leaveName,
        year: this.year,
        pageNo: this.page.pageNo,
        pageSize: this.page.pageSize
      }
      this.Axios
        .Post('/wfConfVacationRoutine/getVacationRecord', params)
        .then((res) => {
          this.tableDatas = res.data.datas
          this.page.total = res.data.total
        })
    },
  },

  mounted () {
    // if (!this.id) {
    //   this.$router.push({ path: 'backStageManager/projectManage' })
    //   return
    // }
    Bus.$on('refresh', (data) => this.refresh = data)
    Bus.$on('leaveName', (data) => this.leaveName = data)
    Bus.$on('year', (data) => this.year = data)
    this.getTableData()
  },
}
</script>

<style scoped>
.detailManage-table {
  padding: 0 20px 50px 20px;
}
.fenye {
  margin: 20px 0 0 -5px;
}

.fenye {
  margin: 20px 0 0 -5px;
}

.opt-btn-sp > a {
  border: 1px solid #18a689;
  background: #18a689;
  color: #fff;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 12px;
  display: inline-block;
  margin: 5px 0;
  cursor: pointer;
}

.opt-btn-sp > a:last-of-type {
  background-color: #ec4758;
  border-color: #ec4758;
}
</style>

<style>
.detailManage-table .fenye .el-pagination span {
  line-height: 24px !important;
}

.detailManage-table .fenye .el-pagination__total {
  padding-top: 3px;
}
</style>
